<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title></title>
        <!-- 引入 WeUI -->
        <link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
        <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
        
        <style type="text/css">
            body,html{
                height: 100%;
            }
            .container{
                height: 100%;
            }
            .hidden{
                display: none;
            }
        </style>
    </head>
    <body >
    <!-- body 顶部加上如下代码 -->
    <div class="weui-pull-to-refresh__layer">
        <div class='weui-pull-to-refresh__arrow'></div>
        <div class='weui-pull-to-refresh__preloader'></div>
        <div class="down">下拉刷新</div>
        <div class="up">释放刷新</div>
        <div class="refresh">正在刷新</div>
    </div>

    <!-- loading toast -->
    <div id="loadingToast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast" style="visibility:visible;opacity: 100">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">数据加载中</p>
        </div>
    </div>
            <div class="container" id="container">
                    <div class="page tabbar js_show" style="position:relative;height: 100%;">
                        <div class="page__bd" style="position:relative;height: 100%;">
                            <div class="weui-tab" >
                                <div class="weui-tab__panel">
                                  <div >
                                      <div class="weui-cells__title" style="text-align:center;border-bottom: 1px #ececec solid;margin-bottom: 0.3em; ">用户管理</div>
                                      <div class="weui-cells weui-cells_form">
                                      </div>
                                      <div id="userListD">
                                      </div>

                                  </div>
                                    <div class="weui-btn-area" style="margin-top: 2em;">
                                        <a id="submitUserA" class="weui-btn weui-btn_primary" href="javascript:">确定</a>
                                    </div>
                                </div>

                            </div>
                            <div class="weui-tabbar" style="z-index:5;">
                              <a href="../deviceInfo" class="weui-tabbar__item" data-tab="firstTab">
                                  <span style="display: inline-block;position: relative;">
                                      <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon"/>
                                      <!--<span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span>-->
                                  </span>
                                  <p class="weui-tabbar__label">设备信息</p>
                              </a>
                              <a href="../deviceEvent" class="weui-tabbar__item" data-tab="secondTab">
                                  <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon"/>
                                  <p class="weui-tabbar__label">设备事件</p>
                              </a>
                                <a href="../deviceManage" class="weui-tabbar__item  weui-bar__item_on" data-tab="thirdTab">
                                    <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon"/>
                                    <p class="weui-tabbar__label">设备维护</p>
                                </a>
                                <a href="../remoteOpenDoor" class="weui-tabbar__item" data-tab="fourthTab">
                                    <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon"/>
                                    <p class="weui-tabbar__label">远程开锁</p>
                                </a>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
   </body>
   
    <script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="//cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){

          var $loadingToast = $("#loadingToast");
          function showLoading(){
              if ($loadingToast.css('display') != 'none') return;
              $loadingToast.fadeIn(100);
          }


          function hideLoading(millSeconds){
              var $loadingToast = $("#loadingToast");
              if (millSeconds) {
                  $loadingToast.fadeOut(millSeconds);
              } else {
                  $loadingToast.fadeOut(100);
              }
          }

          $("#submitUserA").on('click', function () {
              updateUserNameAndHijackStatus();
          });
          //更新用户名和劫持报警状态
          function updateUserNameAndHijackStatus(){
              var userIdArray = $("input[name='userId']").map(function () {
                  return $(this).val();
              }).get();
              console.log(userIdArray)
              var userNameArray = $("input[name='userName']").map(function () {
                  return $(this).val();
              }).get();
              var hijackStatusArray = $("input[name='hijackStatus']").map(function () {
                  return $(this).is(':checked');
              }).get();
              var userArray = new Array();
              var length = userIdArray.length;
              for (var i=0;i<length;i++) {
                  var userObj = {"id":userIdArray[i],"userName":userNameArray[i],"hijackStatus":hijackStatusArray[i]}
                  userArray.push(userObj);
              }
              if (userArray.length > 0) {

               $.ajax({
                  type: "POST",
                  url: "/updateUserNameAndHijackStatus",
                  contentType: "application/json; charset=utf-8",
                  data: JSON.stringify(userArray),
                   beforeSend:function () {
                   showLoading();
                   },
                  dataType: "json",
                  success: function (data) {
                      hideLoading(0);
                      //                    wx.checkJsApi({
//                        jsApiList: ['scanQRCode'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
//                        success: function(res) {
//                            // 以键值对的形式返回，可用的api值true，不可用为false
//                            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
//                            console.log(res)
//                        }
//                    });
                      $.toast("处理成功");
                  },
                  error: function (message) {
                      $.toast("用户保存失败");
                  }
              });
              } else {
                  $.toast("尚未添加用户");
              }
          }

          //更新用户名和劫持报警状态
          function getUserList(){
              showLoading();
              $.ajax({
                  type: "get",
                  url: "/lock2Users",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function (data) {
                      if (data.success == "true") {
                          $("#userListD").empty();
                          var userList = data.data;
                          userList.forEach(function (item,index,input) {
                              var html = '<input type="hidden" name="userId" value="'+item.id+'"></input> ' +
                                         '<div class="weui-cells__title" style="text-align:center;background-color: #ececec;">' + item.userCode +'(' + getUserType(item.type) +')</div>'+
                                         '<div class="weui-cells weui-cells_form">'+
                                            '<div class="weui-cell">'+
                                                '<div class="weui-cell__hd"><label class="weui-label">用户名</label></div>'+
                                                '<div class="weui-cell__bd">'+
                                                    '<input class="weui-input" name="userName" maxlength="20" value="'+(item.userName != null ? item.userName : "")+'" placeholder="请输入用户名">'+
                                                '</div>'+
                                            '</div>'+
                                            '<div class="weui-cell weui-cell_switch">'+
                                                  '<div class="weui-cell__bd">劫持报警</div>'+
                                                  '<div class="weui-cell__ft">'+
                                                    '<input class="weui-switch" name="hijackStatus" type="checkbox" '+ (item.hijackStatus ? "checked":"" )+'>'+
                                                  '</div>'+
                                              '</div>'+
                                          '</div>';
                              $("#userListD").append(html);
                          })
                      }
                  },
                  error: function (message) {
                      $.toast("查询失败");
                  },
                  complete:function () {
                      hideLoading(0);
                  }
              });
          }
          getUserList();

          function getUserType(type){
              if (type == 0) {
                  return "指纹"
              } else if (type == 1) {
                  return "密码"
              } else if (type == 2) {
                  return "卡"
              } else if (type == 3) {
                  return "钥匙"
              } else if (type == 4) {
                  return "遥控"
              }
              return type;
          }



          //下拉刷新
          $(document.body).pullToRefresh(function () {
              getUserList();
              $(document.body).pullToRefreshDone();
          });

      });



    </script>
</html>


